<template>
  <div class="person-center">
    <div class="header">
      <NavIndex></NavIndex>
    </div>
    <!-- 顶部导航 -->
    

    <!-- 主内容区 - 两段式布局 -->
    <div class="main-content">
      <!-- 左侧个人信息卡片 -->
      <div class="profile-card">
        <div class="profile-header">
          <div class="avatar-container">
            <img src="@/assets/img/head_portrait3.jpg" alt="头像" class="avatar" />
            <div class="avatar-glow"></div>
          </div>
          <h2 class="username">{{ userData.username }}</h2>
          <p class="user-title">{{ userData.title }}</p>
        </div>
        
        <!-- 用户基本信息 -->
        <div class="user-info-container">
          <div class="info-item">
            <div class="info-label">年级:</div>
            <div class="info-value">{{ userData.grade }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">学号:</div>
            <div class="info-value">{{ userData.studentId }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">专业:</div>
            <div class="info-value">{{ userData.major }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">邮箱:</div>
            <div class="info-value">{{ userData.email }}</div>
          </div>
        </div>

        <!-- 文章统计数据 -->
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-value">{{ userData.stats.published }}</div>
            <div class="stat-label">发布</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userData.stats.likes }}</div>
            <div class="stat-label">获赞</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userData.stats.favorite }}</div>
            <div class="stat-label">收藏</div>
          </div>
        </div>

        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-value">{{ userData.stats.views }}</div>
            <div class="stat-label">浏览</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userData.stats.followers }}</div>
            <div class="stat-label">粉丝</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userData.stats.following }}</div>
            <div class="stat-label">关注</div>
          </div>
        </div>

        <div class="action-buttons">
          <button class="action-btn" @click="openEditModal">
            <el-icon><Edit /></el-icon> 修改个人信息
          </button>
        </div>
      </div>

      <!-- 个人信息编辑弹窗 -->
      <el-dialog
        v-model="showEditModal"
        title="修改个人信息"
        width="35%"
        center
        class="edit-dialog"
        append-to-body
        destroy-on-close
        :before-close="handleDialogClose"
      >
        <!-- <div class="dialog-header-icon">
          <el-icon><Edit /></el-icon>
        </div> -->
        
        <el-form 
          :model="editForm" 
          :rules="rules" 
          ref="editFormRef" 
          label-width="80px" 
          status-icon
          class="edit-form"
        >
          <el-form-item label="姓名" prop="username">
            <el-input v-model="editForm.username" placeholder="请输入姓名">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="年级" prop="grade">
            <el-input v-model="editForm.grade" placeholder="请输入年级">
              <template #prefix>
                <el-icon><School /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="学号" prop="studentId">
            <el-input v-model="editForm.studentId" placeholder="请输入学号">
              <template #prefix>
                <el-icon><Ticket /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="专业" prop="major">
            <el-input v-model="editForm.major" placeholder="请输入专业">
              <template #prefix>
                <el-icon><Reading /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="editForm.email" placeholder="请输入邮箱">
              <template #prefix>
                <el-icon><Message /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 中间博客内容区 -->
      <div class="blog-area">
        <!-- 博客切换按钮 -->
        <div class="blog-tabs">
          <div 
            class="blog-tab" 
            :class="{ active: activeTab === 'published' }" 
            @click="switchTab('published')"
          >
            我发布的博客
          </div>
          <div 
            class="blog-tab" 
            :class="{ active: activeTab === 'liked' }" 
            @click="switchTab('liked')"
          >
            我点赞的博客
          </div>
          <div 
            class="blog-tab" 
            :class="{ active: activeTab === 'collected' }" 
            @click="switchTab('collected')"
          >
            我收藏的博客
          </div>
          
          <!-- 仅用于演示的空状态切换按钮 -->
          <div class="toggle-empty">
            <el-switch
              v-model="showEmptyState"
              inline-prompt
              active-text="空"
              inactive-text="有"
              @change="toggleEmptyState"
            />
          </div>
        </div>

        <!-- 搜索栏
        <div class="search-bar">
          <input type="text" placeholder="搜索博客" />
          <button class="search-btn"><i class="el-icon-search"></i></button>
        </div> -->

        <!-- 内容卡片 -->
        <div class="content-cards">
          <!-- 发布的博客内容 -->
          <template v-if="activeTab === 'published'">
            <div v-if="publishedBlogs.length > 0" class="content-card" v-for="(blog, index) in publishedBlogs" :key="'pub-'+index">
              <div class="card-header">
                <img src="@/assets/img/head_portrait3.jpg" alt="用户头像" class="user-avatar" />
                <div class="post-info">
                  <div class="post-author">{{ userData.username }}</div>
                  <div class="post-time">· {{ blog.time }}</div>
                </div>
                <div class="post-actions">
                  <el-icon><Apple /></el-icon>
                  <span>{{ blog.likes }}</span>
                </div>
                <div class="post-actions">
                  <el-icon><View /></el-icon>
                  <span>{{ blog.views }}</span>
                </div>
                <div class="post-actions">
                  <el-icon><Star /></el-icon>
                  <span>{{ blog.favorites }}</span>
                </div>
              </div>
              <div class="card-title">{{ blog.title }}</div>
              <div class="card-content">
                <img src="@/assets/img/华为ict.png" alt="内容图片" class="content-image" />
                <p v-if="blog.summary" class="content-summary">{{ blog.summary }}</p>
              </div>
              <div class="card-footer">
                <div class="comment-section">
                  <span>评论区：</span>
                  <span class="comment-count">{{ blog.comments }} 条</span>
                  <div class="comment-icon"><el-icon><ChatSquare /></el-icon></div>
                </div>
                <div class="report-icon"><el-icon><WarnTriangleFilled /></el-icon></div>
              </div>
            </div>
            <div v-else class="empty-state">
              <el-icon class="empty-icon"><Document /></el-icon>
              <div class="empty-text">您还没有发布任何博客</div>
              <el-button type="primary" class="add-blog-btn">写博客</el-button>
            </div>
          </template>

          <!-- 点赞的博客内容 -->
          <template v-if="activeTab === 'liked'">
            <div v-if="likedBlogs.length > 0" class="content-card" v-for="(blog, index) in likedBlogs" :key="'like-'+index">
              <div class="card-header">
                <img src="@/assets/img/head_portrait3.jpg" alt="用户头像" class="user-avatar" />
                <div class="post-info">
                  <div class="post-author">{{ blog.author }}</div>
                  <div class="post-time">· {{ blog.time }}</div>
                </div>
                <div class="post-actions">
                  <el-icon><Apple /></el-icon>
                  <span>{{ blog.likes }}</span>
                </div>
                <div class="post-actions">
                  <el-icon><View /></el-icon>
                  <span>{{ blog.views }}</span>
                </div>
                <div class="post-actions">
                  <el-icon><Star /></el-icon>
                  <span>{{ blog.favorites }}</span>
                </div>
              </div>
              <div class="card-title">{{ blog.title }}</div>
              <div class="card-content">
                <img src="@/assets/img/华为ict.png" alt="内容图片" class="content-image" />
                <p v-if="blog.summary" class="content-summary">{{ blog.summary }}</p>
              </div>
              <div class="card-footer">
                <div class="comment-section">
                  <span>评论区：</span>
                  <span class="comment-count">{{ blog.comments }} 条</span>
                  <div class="comment-icon"><el-icon><ChatSquare /></el-icon></div>
                </div>
                <div class="report-icon"><el-icon><WarnTriangleFilled /></el-icon></div>
              </div>
            </div>
            <div v-else class="empty-state">
              <el-icon class="empty-icon"><Star /></el-icon>
              <div class="empty-text">您还没有点赞任何博客</div>
              <el-button type="primary" class="browse-btn">浏览热门</el-button>
            </div>
          </template>

          <!-- 收藏的博客内容 -->
          <template v-if="activeTab === 'collected'">
            <div v-if="collectedBlogs.length > 0" class="content-card" v-for="(blog, index) in collectedBlogs" :key="'collect-'+index">
              <div class="card-header">
                <img src="@/assets/img/head_portrait3.jpg" alt="用户头像" class="user-avatar" />
                <div class="post-info">
                  <div class="post-author">{{ blog.author }}</div>
                  <div class="post-time">· {{ blog.time }}</div>
                </div>
                <div class="post-actions">
                  <el-icon><Apple /></el-icon>
                  <span>{{ blog.likes }}</span>
                </div>
                <div class="post-actions">
                  <el-icon><View /></el-icon>
                  <span>{{ blog.views }}</span>
                </div>
                <div class="post-actions">
                  <el-icon><Star /></el-icon>
                  <span>{{ blog.favorites }}</span>
                </div>
              </div>
              <div class="card-title">{{ blog.title }}</div>
              <div class="card-content">
                <img src="@/assets/img/华为ict.png" alt="内容图片" class="content-image" />
                <p v-if="blog.summary" class="content-summary">{{ blog.summary }}</p>
              </div>
              <div class="card-footer">
                <div class="comment-section">
                  <span>评论区：</span>
                  <span class="comment-count">{{ blog.comments }} 条</span>
                  <div class="comment-icon"><el-icon><ChatSquare /></el-icon></div>
                </div>
                <div class="report-icon"><el-icon><WarnTriangleFilled /></el-icon></div>
              </div>
            </div>
            <div v-else class="empty-state">
              <el-icon class="empty-icon"><Star /></el-icon>
              <div class="empty-text">您还没有收藏任何博客</div>
              <el-button type="primary" class="browse-btn">发现精彩</el-button>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavIndex from "@/components/topNav/topNavIndex.vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from "vue";
import { 
  Edit, 
  User, 
  School, 
  Ticket, 
  Reading, 
  Message, 
  ChatSquare, 
  Star, 
  View, 
  Apple, 
  WarnTriangleFilled,
  Document
} from '@element-plus/icons-vue';

export default {
  name: "PersonIndex",
  components: {
    NavIndex,
    Edit,
    User,
    School,
    Ticket,
    Reading,
    Message,
    ChatSquare,
    Star,
    View,
    Apple,
    WarnTriangleFilled,
    Document
  },
  data() {
    return {
      // 用户数据
      userData: {
        username: "触碰云端上方的梦想",
        title: "云实验室 · 高级成员",
        grade: "2021级",
        studentId: "202112345678",
        major: "计算机科学与技术",
        email: "cloud_dream@example.com",
        stats: {
          published: 12,
          likes: 48,
          favorite: 25,
          views: 1024,
          followers: 36,
          following: 42,
        },
      },
      // 当前选中的博客标签
      activeTab: 'published',
      // 编辑弹窗显示状态
      showEditModal: false,
      // 编辑表单数据
      editForm: {
        username: "",
        grade: "",
        studentId: "",
        major: "",
        email: ""
      },
      // 表单验证规则
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        grade: [
          { required: true, message: '请输入年级', trigger: 'blur' }
        ],
        studentId: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { pattern: /^\d+$/, message: '学号必须为数字', trigger: 'blur' }
        ],
        major: [
          { required: true, message: '请输入专业', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ]
      },
      // 表单ref
      editFormRef: ref(null),
      // 已发布的博客数据
      publishedBlogs: [
        {
          title: "【分享帖】基沃托斯的一天_无文字版",
          time: "1小时前",
          likes: 24,
          views: 738,
          favorites: 12,
          comments: 8,
          summary: "今天漫步在基沃托斯的街道上，看到了许多有趣的事情，特此分享给大家..."
        },
        {
          title: "云计算学习路线分享",
          time: "3天前",
          likes: 156,
          views: 1247,
          favorites: 89,
          comments: 32,
          summary: "学习云计算已经有3年了，这里分享一下我的学习路线和一些心得体会。希望对大家有所帮助..."
        },
        {
          title: "Python数据分析实战案例",
          time: "1周前",
          likes: 203,
          views: 2156,
          favorites: 178,
          comments: 45,
          summary: "这是一个使用Python进行数据分析的实战案例，包含完整的代码和分析思路..."
        }
      ],
      // 点赞的博客数据
      likedBlogs: [
        {
          author: "技术新星",
          title: "Docker容器化部署全流程",
          time: "2天前",
          likes: 320,
          views: 1567,
          favorites: 234,
          comments: 67,
          summary: "详细介绍了Docker容器化部署的全流程，包括环境配置、镜像构建、容器编排等内容..."
        },
        {
          author: "代码大师",
          title: "Spring Boot 3.0新特性解析",
          time: "4天前",
          likes: 189,
          views: 876,
          favorites: 102,
          comments: 28,
          summary: "Spring Boot 3.0带来了哪些革命性的变化？本文将为你一一解析..."
        },
        {
          author: "云端漫步",
          title: "AWS云服务架构设计最佳实践",
          time: "1周前",
          likes: 276,
          views: 2341,
          favorites: 198,
          comments: 53,
          summary: "基于多年AWS云服务架构设计经验，分享一些最佳实践和常见陷阱..."
        }
      ],
      // 收藏的博客数据
      collectedBlogs: [
        {
          author: "人工智能爱好者",
          title: "图解机器学习算法：从线性回归到神经网络",
          time: "5天前",
          likes: 567,
          views: 4321,
          favorites: 432,
          comments: 87,
          summary: "通过简洁明了的图解方式，带你理解从最基础的线性回归到复杂的神经网络的各种机器学习算法..."
        },
        {
          author: "前端大神",
          title: "Vue3+TypeScript项目实战：从0到1构建企业级应用",
          time: "1周前",
          likes: 432,
          views: 3210,
          favorites: 321,
          comments: 76,
          summary: "详细记录了使用Vue3和TypeScript从0开始构建一个企业级应用的全过程，包含代码和设计思路..."
        },
        {
          author: "网络安全专家",
          title: "Web应用安全防护指南2023版",
          time: "2周前",
          likes: 389,
          views: 2987,
          favorites: 278,
          comments: 64,
          summary: "2023年最新的Web应用安全防护指南，涵盖常见漏洞、攻击手段和防护策略..."
        }
      ],
      // 仅用于演示的空状态切换按钮
      showEmptyState: false,
      // 用于缓存博客数据
      _cachedBlogs: null,
    };
  },
  mounted() {
    // 添加鼠标移动效果
    document.addEventListener("mousemove", this.handleMouseMove);
    
    // 添加卡片悬停效果
    const cards = document.querySelectorAll(".content-card");
    cards.forEach((card) => {
      card.addEventListener("mouseenter", this.handleCardHover);
      card.addEventListener("mouseleave", this.handleCardLeave);
    });
  },
  beforeUnmount() {
    // 移除事件监听器
    document.removeEventListener("mousemove", this.handleMouseMove);
  },
  methods: {
    // 切换博客标签
    switchTab(tab) {
      if (this.activeTab !== tab) {
        // 添加切换动画效果
        const contentCards = document.querySelector('.content-cards');
        if (contentCards) {
          contentCards.classList.add('tab-switching');
          
          setTimeout(() => {
            this.activeTab = tab;
            
            setTimeout(() => {
              contentCards.classList.remove('tab-switching');
            }, 10);
          }, 300);
        } else {
          this.activeTab = tab;
        }
        
        // 这里可以添加加载对应标签内容的逻辑
        // 例如从服务器获取数据：
        // if (tab === 'liked' && this.likedBlogs.length === 0) {
        //   this.fetchLikedBlogs();
        // }
      }
    },
    
    // 打开编辑弹窗时初始化表单数据
    openEditModal() {
      this.editForm = {
        username: this.userData.username,
        grade: this.userData.grade,
        studentId: this.userData.studentId,
        major: this.userData.major,
        email: this.userData.email
      };
      this.showEditModal = true;
    },
    
    // 保存用户信息
    saveUserInfo() {
      // 更新用户数据
      this.userData.username = this.editForm.username;
      this.userData.grade = this.editForm.grade;
      this.userData.studentId = this.editForm.studentId;
      this.userData.major = this.editForm.major;
      this.userData.email = this.editForm.email;
      
      // 关闭弹窗
      this.showEditModal = false;
      
      // 这里可以添加发送更新到后端的代码
      // 例如: this.$api.updateUserProfile(this.editForm);
      
      // 显示成功提示
      ElMessage({
        message: '个人信息修改成功！',
        type: 'success'
      });
    },
    
    // 重置表单
    resetForm() {
      this.$refs.editFormRef.resetFields();
    },
    
    // 表单提交方法，先验证再保存
    submitForm() {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.saveUserInfo();
        } else {
          ElMessage({
            message: '请正确填写表单信息',
            type: 'warning'
          });
          return false;
        }
      });
    },
    
    // 处理对话框关闭事件
    handleDialogClose(done) {
      if (this.hasFormChanged()) {
        ElMessageBox.confirm('您有未保存的更改，确定要关闭吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            done();
          })
          .catch(() => {});
      } else {
        done();
      }
    },
    
    // 检查表单是否有变化
    hasFormChanged() {
      return (
        this.editForm.username !== this.userData.username ||
        this.editForm.grade !== this.userData.grade ||
        this.editForm.studentId !== this.userData.studentId ||
        this.editForm.major !== this.userData.major ||
        this.editForm.email !== this.userData.email
      );
    },
    
    handleMouseMove(event) {
      // 获取鼠标位置
      const x = event.clientX / window.innerWidth;
      const y = event.clientY / window.innerHeight;
      
      // 应用微妙的背景移动效果
      document.querySelector(".person-center").style.backgroundPosition = `${x * 10}px ${y * 10}px`;
      
      // 为头像添加光晕效果
      const glow = document.querySelector(".avatar-glow");
      if (glow) {
        glow.style.background = `radial-gradient(circle at ${x * 100}% ${y * 100}%, rgba(0, 195, 255, 0.5), transparent 70%)`;
      }
    },
    
    handleCardHover(event) {
      // 卡片悬停效果
      event.currentTarget.style.transform = "translateY(-10px) scale(1.02)";
      event.currentTarget.style.boxShadow = "0 15px 30px rgba(0, 0, 0, 0.3)";
    },
    
    handleCardLeave(event) {
      // 卡片离开效果
      event.currentTarget.style.transform = "";
      event.currentTarget.style.boxShadow = "";
    },
    
    // 关闭对话框
    closeDialog() {
      this.showEditModal = false;
    },
    
    // 仅用于演示的空状态切换方法
    toggleEmptyState() {
      if (this.showEmptyState) {
        // 清空数据以显示空状态
        this._cachedBlogs = {
          published: [...this.publishedBlogs],
          liked: [...this.likedBlogs],
          collected: [...this.collectedBlogs]
        };
        
        this.publishedBlogs = [];
        this.likedBlogs = [];
        this.collectedBlogs = [];
      } else {
        // 恢复数据
        if (this._cachedBlogs) {
          this.publishedBlogs = [...this._cachedBlogs.published];
          this.likedBlogs = [...this._cachedBlogs.liked];
          this.collectedBlogs = [...this._cachedBlogs.collected];
        }
      }
    },
  },
};
</script>

<style scoped>
.person-center {
  min-height: 100vh;
  background: linear-gradient(to right, rgb(10, 2, 13), rgb(51, 45, 53));
  background-size: 120% 120%;
  color: #e0e6f0;
  font-family: "Microsoft YaHei", sans-serif;
  transition: background-position 0.5s ease;
  position: relative;
  overflow-x: hidden;
}

.person-center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%232a3f5f' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
  z-index: 0;
}
.header{
  height: 70px;
}

.main-content {
  display: flex;
  padding: 20px;
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  gap: 20px;
}

/* 左侧个人信息卡片 */
.profile-card {
  width: 300px;
  background: rgba(28, 42, 63, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 123, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.profile-card:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 50px rgba(0, 123, 255, 0.2);
  transform: translateY(-5px);
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}

.avatar-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #4f78b5;
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
}

.avatar-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 195, 255, 0.5), transparent 70%);
  filter: blur(10px);
  z-index: 1;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.avatar-container:hover .avatar {
  transform: scale(1.05);
  border-color: #00c3ff;
}

.avatar-container:hover .avatar-glow {
  opacity: 1;
}

.username {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
}

.user-title {
  font-size: 0.9rem;
  color: #a0b4d8;
  margin: 5px 0 0;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px;
  padding: 10px 0;
  border-top: 1px solid rgba(79, 120, 181, 0.2);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #00c3ff;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
}

.stat-label {
  font-size: 0.8rem;
  color: #a0b4d8;
}

.action-buttons {
  width: 100%;
  margin-top: 10px;
}

.action-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #4f78b5, #3a5a8c);
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.action-btn:hover {
  background: linear-gradient(135deg, #5a8ad0, #4f78b5);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 右侧内容区 */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 标签页 */
.tabs {
  display: flex;
  background: rgba(28, 42, 63, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(79, 120, 181, 0.2);
}

.tab {
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #a0b4d8;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.tab:hover {
  color: #ffffff;
  background: rgba(79, 120, 181, 0.1);
}

.tab.active {
  color: #ffffff;
  background: rgba(79, 120, 181, 0.2);
}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00c3ff, #4f78b5);
}

/* 搜索栏 */
.search-bar {
  display: flex;
  background: rgba(28, 42, 63, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(79, 120, 181, 0.2);
  transition: all 0.3s ease;
}

.search-bar:focus-within {
  box-shadow: 0 5px 20px rgba(0, 123, 255, 0.2);
  border-color: rgba(79, 120, 181, 0.5);
}

.search-bar input {
  flex: 1;
  padding: 12px 20px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.9rem;
}

.search-bar input::placeholder {
  color: #a0b4d8;
}

.search-btn {
  background: linear-gradient(135deg, #4f78b5, #3a5a8c);
  color: white;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-btn:hover {
  background: linear-gradient(135deg, #5a8ad0, #4f78b5);
}

/* 内容卡片 */
.content-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.content-cards.tab-switching {
  opacity: 0;
  transform: translateY(20px);
}

.content-card {
  background: rgba(28, 42, 63, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  margin-bottom: 25px;
  position: relative;
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: linear-gradient(to bottom, #00c3ff, #4f78b5);
  transition: height 0.5s ease;
}

.content-card:hover::before {
  height: 100%;
}

.content-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 50px rgba(0, 123, 255, 0.1);
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid rgba(79, 120, 181, 0.1);
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #4f78b5;
  margin-right: 10px;
}

.post-info {
  flex: 1;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.post-author {
  font-weight: 500;
  color: #ffffff;
}

.post-time {
  color: #a0b4d8;
  font-size: 0.8rem;
  margin-left: 5px;
}

.post-actions {
  display: flex;
  align-items: center;
  color: #a0b4d8;
  margin-left: 15px;
  gap: 5px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border-radius: 20px;
  padding: 2px 8px;
}

.post-actions:hover {
  background: rgba(79, 120, 181, 0.3);
  color: #ffffff;
}

.card-title {
  padding: 15px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #ffffff;
  transition: all 0.3s ease;
}

.content-card:hover .card-title {
  color: #00c3ff;
  padding-left: 10px;
}

.card-content {
  padding: 0 15px 15px;
}

.content-image {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  max-height: 300px;
  transition: all 0.3s ease;
}

.content-image:hover {
  transform: scale(1.02);
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-top: 1px solid rgba(79, 120, 181, 0.1);
  color: #a0b4d8;
  font-size: 0.9rem;
}

.comment-section {
  display: flex;
  align-items: center;
  gap: 5px;
}

.comment-icon, .report-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(79, 120, 181, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.comment-icon:hover, .report-icon:hover {
  background: rgba(79, 120, 181, 0.3);
  color: #ffffff;
}

/* 用户基本信息 */
.user-info-container {
  width: 100%;
  margin-bottom: 15px;
  padding: 15px;
  background: rgba(28, 42, 63, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item {
  display: flex;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(79, 120, 181, 0.2);
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-label {
  width: 60px;
  color: #a0b4d8;
  font-size: 0.9rem;
}

.info-value {
  flex: 1;
  color: #ffffff;
  font-size: 0.9rem;
  word-break: break-all;
}

/* 中间博客区域 */
.blog-area {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-tabs {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  background: rgba(28, 42, 63, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-tab {
  flex: 1;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #a0b4d8;
  font-weight: 500;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.blog-tab:hover {
  color: #ffffff;
  background: rgba(79, 120, 181, 0.1);
}

.blog-tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(79, 120, 181, 0.2), rgba(0, 195, 255, 0.1));
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: -1;
}

.blog-tab:hover::before {
  transform: translateY(0);
}

.blog-tab.active {
  color: #ffffff;
  background: rgba(79, 120, 181, 0.3);
}

.blog-tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00c3ff, #4f78b5);
}

.blog-tab.active::before {
  transform: translateY(0);
}

/* 编辑对话框样式 */
:deep(.edit-dialog) {
  .el-dialog {
    background: rgba(28, 42, 63, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    transform: translateY(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    
    &.dialog-fade-enter-from,
    &.dialog-fade-leave-to {
      transform: translateY(-30px);
      opacity: 0;
    }
  }
  
  .dialog-header-icon {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #4f78b5, #3a5a8c);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.1);
    z-index: 10;
    
    .el-icon {
      font-size: 1.3rem;
      animation: pulse 2s infinite;
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .el-dialog__title {
    color: #ffffff;
    font-weight: 500;
    font-size: 1.2rem;
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
  }
  
  .el-dialog__header {
    border-bottom: 1px solid rgba(79, 120, 181, 0.2);
    padding-bottom: 15px;
    margin-top: 20px;
  }
  
  .el-dialog__body {
    color: #e0e6f0;
    padding: 25px;
  }
  
  .edit-form {
    .el-form-item {
      margin-bottom: 20px;
      position: relative;
      
      &:hover {
        .el-form-item__label {
          color: #00c3ff;
          transform: translateX(3px);
        }
      }
    }
    
    .el-form-item__label {
      color: #a0b4d8;
      font-weight: 500;
      transition: all 0.3s ease;
    }
    
    .el-form-item__content {
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #00c3ff, transparent);
        transition: all 0.3s ease;
      }
      
      &:hover::after {
        width: 100%;
      }
    }
  }
  
  .el-input {
    --el-input-bg-color: rgba(28, 42, 63, 0.5);
    --el-input-border-color: rgba(79, 120, 181, 0.3);
    --el-input-hover-border-color: rgba(0, 195, 255, 0.5);
    --el-input-focus-border-color: #00c3ff;
    --el-input-text-color: #ffffff;
    
    .el-input__wrapper {
      background: rgba(28, 42, 63, 0.5);
      border: 1px solid rgba(79, 120, 181, 0.3);
      border-radius: 8px;
      box-shadow: none;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: rgba(0, 195, 255, 0.5);
      }
      
      &.is-focus {
        border-color: #00c3ff;
        box-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
      }
    }
    
    .el-input__inner {
      color: #ffffff;
      
      &::placeholder {
        color: rgba(160, 180, 216, 0.5);
      }
    }
    
    .el-input__prefix {
      color: #a0b4d8;
      transition: all 0.3s ease;
    }
    
    &:hover .el-input__prefix, 
    .el-input__wrapper.is-focus .el-input__prefix {
      color: #00c3ff;
    }
  }
  
  .el-form-item.is-error .el-input__wrapper {
    border-color: #f56c6c;
    
    &:hover, &.is-focus {
      border-color: #f56c6c;
      box-shadow: 0 0 10px rgba(245, 108, 108, 0.3);
    }
  }
  
  .el-form-item__error {
    color: #f56c6c;
    font-size: 0.8rem;
  }
  
  .el-dialog__footer {
    border-top: 1px solid rgba(79, 120, 181, 0.2);
    padding-top: 15px;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
  }
  
  .el-button {
    border-radius: 30px;
    padding: 10px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
  }
  
  .el-button--default {
    background: rgba(28, 42, 63, 0.5);
    border: 1px solid rgba(79, 120, 181, 0.3);
    color: #a0b4d8;
    
    &:hover {
      background: rgba(79, 120, 181, 0.2);
      border-color: rgba(79, 120, 181, 0.5);
      color: #ffffff;
      transform: translateY(-2px);
    }
  }
  
  .el-button--primary {
    background: linear-gradient(135deg, #4f78b5, #3a5a8c);
    border: none;
    color: #ffffff;
    
    &:hover {
      background: linear-gradient(135deg, #5a8ad0, #4f78b5);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
  }
}

.content-summary {
  margin-top: 15px;
  color: #a0b4d8;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0 15px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.empty-text {
  font-size: 1rem;
  margin-bottom: 20px;
}

.add-blog-btn, .browse-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #4f78b5, #3a5a8c);
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-blog-btn:hover, .browse-btn:hover {
  background: linear-gradient(135deg, #5a8ad0, #4f78b5);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 博客标签切换样式增强 */
.toggle-empty {
  margin-left: auto;
  padding: 0 15px;
  display: flex;
  align-items: center;
}

:deep(.el-switch) {
  --el-switch-on-color: #4f78b5;
  --el-switch-off-color: rgba(28, 42, 63, 0.5);
  
  .el-switch__core {
    border: 1px solid rgba(79, 120, 181, 0.3);
  }
  
  .el-switch__label {
    color: #a0b4d8;
  }
  
  &.is-checked .el-switch__label {
    color: #00c3ff;
  }
}
</style>